iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
自我挑戰組

從零開始學習React 系列 第 4

Day04 透過實作一個web 頁面介紹 component 的概念

  • 分享至 

  • xImage
  •  

React是由component所組成,Component可以將 UI 拆分成獨立且可重複使用的程式碼,在 React 元件模組化的概念下,建構 web 頁面 UI 時,就很像是在堆積木,而每一塊積木就是所謂的元件Component,Component 的大小和範圍都是可自己決定。

https://ithelp.ithome.com.tw/upload/images/20210919/201398004u8UhxqnaQ.png

這次實作我將網頁切割成三個Component,分為Header1,Header2,Section1

  • 先在SRC 資料夾新建一個components文件夾,並將所有分離的組件文件放在這里。

https://ithelp.ithome.com.tw/upload/images/20210919/2013980068VQrAqjSG.png

  • 用 function 宣告 Component。
import React from 'react'

const Header1 = (props) => {
    return (
        <div>
            <div className="header-1">
              <a href=" " className="logo"><i class="fas fa-gift"></i>Delivery</a>
      
            <form action="" className="search-box-container">
               <input type="search" id="search-box" placeholder="search here"></input>
               <label for="search-box" class="fas fa-search"></label>
            </form>
           </div>
        </div>
    )
}

export default Header1

每個Component都必用export default輸出。

  • 組件完成後,最後會在 App.js 元件中組合,在app.js中,先將組件import進來,再把組件集中在function中
import React from 'react';
import Header1 from "./components/Header1";
import Header2 from "./components/Header2";
import Section1 from "./components/Section1";

const App = (props) => {
  return (
    <div>
      <Header1 />
      <Header2 />
      <Section1 />
    </div>
  )
}

export default App

最後再將app.js頁面元件import 至index.js中於此進行渲染

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

上一篇
Day03 建立一個 React 專案
下一篇
Day05 補充筆記1
系列文
從零開始學習React 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言